import React from 'react';
import { SvgIcon } from '@/components/icon';

interface GuessQuestion {
  id: string;
  content: string;
}

interface GuessYouWantToAskProps {
  questions: GuessQuestion[];
  onQuestionClick: (question: string) => void;
}

const GuessYouWantToAsk: React.FC<GuessYouWantToAskProps> = ({ questions, onQuestionClick }) => {
  if (!questions || questions.length === 0) {
    return null;
  }

  return (
    <div className="my-3">
      {/* 标题栏 */}
      {/* <div
        className="flex items-center mb-2"
        style={{
          display: 'flex',
          alignItems: 'center'
        }}
      >
        <SvgIcon icon='rj-guess' size={14} color='#8890ff' />
        <div
          style={{
            fontWeight: 400,
            // fontSize: '14px',
            color: '#474C5F',
            marginLeft: '8px',
            marginRight: '8px'
          }}
        >
          猜你想问
        </div>
        <div
          style={{
            height: '1px',
            marginTop: '0.25rem',
            background: '#e8ebf0',
            flex: '1 1 0%'
          }}
        />
      </div> */}

      {/* 问题列表 */}
      {/* <div className="flex flex-col gap-2 ml-2">
        {questions.map((question) => (
          <div
            key={question.id}
            className="px-3 py-2 rounded-lg cursor-pointer"
            onClick={() => onQuestionClick(question.content)}
          >
            <SvgIcon
              icon={'ai-hot'}
              size={25}
              className="p-1 rounded-md flex-shrink-0"
            />
            <div style={{
              fontWeight: 400,
              color: '#474C5F'
            }}>
              {question.content}
            </div>
          </div>
        ))}
      </div> */}


      {questions?.map((question, index) => {
        return (
          <div
            className={`hot-card text-sm text-black h-10 bg-[#fff] flex items-center px-2 mt-2.5 cursor-pointer w-auto`}
            key={index}
            onClick={() => onQuestionClick(question.content)}
          >
            <div>
              <SvgIcon
                icon={'ai-hot'}
                size={25}
                className="p-1 rounded-md flex-shrink-0"
              />
            </div>
            <div className="scrolltext">
              <span>{question.content}</span>
            </div>
          </div>
        );
      })}


    </div>
  );
};

export default GuessYouWantToAsk; 